<template>
  <div class="router-main-view">
    <p class="view-title">Button组件</p>
    <ComponentsLayout title="theme示例" :code="ButtonThemeCode">
      <ButtonTheme />
    </ComponentsLayout>
    <ComponentsLayout title="size示例" :code="ButtonSizeCode">
      <ButtonSize />
    </ComponentsLayout>
    <ComponentsLayout title="type示例" :code="ButtonTypeCode">
      <ButtonType />
    </ComponentsLayout>
    <ComponentsLayout title="disabled示例" :code="ButtonDisabledCode">
      <ButtonDisabled />
    </ComponentsLayout>
    <ComponentsLayout title="loading示例" :code="ButtonLoadingCode">
      <ButtonLoading />
    </ComponentsLayout>
    <ApiLayout :propData="ButtonProp"></ApiLayout>
  </div>
</template>

<script setup lang="ts">
import ButtonProp from "@/views/props/Button.prop";
import ComponentsLayout from "../ComponentsLayout.vue";
import ApiLayout from "../ApiLayout.vue";
import ButtonTheme from "./ButtonTheme.vue";
import ButtonThemeCode from "./ButtonTheme.vue?raw";
import ButtonSize from "./ButtonSize.vue";
import ButtonSizeCode from "./ButtonSize.vue?raw";
import ButtonType from "./ButtonType.vue";
import ButtonTypeCode from "./ButtonType.vue?raw";
import ButtonDisabled from "./ButtonDisabled.vue";
import ButtonDisabledCode from "./ButtonDisabled.vue?raw";
import ButtonLoading from "./ButtonLoading.vue";
import ButtonLoadingCode from "./ButtonLoading.vue?raw";

import {} from "vue";
</script>
<style lang="scss" scoped>
.router-main-view {
  .view-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 3;
  }
}
</style>
